package com.lzgcoding.onlineshopapp.feature.main.dashboard

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.lzgcoding.onlineshopapp.R
import com.lzgcoding.onlineshopapp.feature.main.dashboard.component.CategoryList
import com.lzgcoding.onlineshopapp.feature.main.dashboard.component.DashboardTopBar
import com.lzgcoding.onlineshopapp.feature.main.dashboard.component.PopularList
import com.lzgcoding.onlineshopapp.feature.main.dashboard.component.SearchField
import com.lzgcoding.onlineshopapp.feature.main.dashboard.component.SwiperWidget
import com.lzgcoding.onlineshopapp.nav.AppRoute
import com.lzgcoding.onlineshopapp.ui.theme.LargePadding
import com.lzgcoding.onlineshopapp.ui.theme.MediumPadding
import com.lzgcoding.onlineshopapp.ui.theme.OnlineShopAppTheme
import org.koin.androidx.compose.koinViewModel

@Composable
fun DashboardScreen(
    navigateToAppRoute: (AppRoute) -> Unit
) {
    val viewModel = koinViewModel<DashboardViewModel>()
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    Scaffold(
        topBar = {
            DashboardTopBar(username = "LZG", profileIcon = R.drawable.profile)
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding)
                .verticalScroll(rememberScrollState())
        ) {
            SearchField(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = LargePadding)
                    .padding(top = MediumPadding),
                value = uiState.searchValue,
                onValueChange = viewModel::onSearchValueChange
            )
            CategoryList(
                categories = uiState.categories,
                selectedCategoryId = uiState.selectedCategoryId,
                onCategorySelected = viewModel::onCategorySelected
            )
            SwiperWidget(banners = uiState.banners)
            PopularList(
                populars = uiState.populars,
                navigateToAppRoute = navigateToAppRoute
            )
            Spacer(Modifier.height(LargePadding * 2))
        }
    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
private fun DashboardScreenPreview() {
    OnlineShopAppTheme {
        DashboardScreen() {}
    }
}